main {
  background: #f5f5f5;
  padding-bottom: 20px;
}

main .breadcrumb {
  background-color: #fff;
  padding-left: 17%;
  border-top: 1px solid #dbdbdb;
  border-bottom: 1px solid #dbdbdb;
}

main .breadcrumb .breadcrumb-item {
  font-size: 12px;
}

main .breadcrumb .breadcrumb-item > a {
  color: #666;
}

main .breadcrumb .breadcrumb-item > a:hover {
  text-decoration: none;
}

main .breadcrumb .activity > a {
  color: #333;
}

main .breadcrumb .activity > a:hover {
  text-decoration: none;
}

main .wrapper {
  width: 900px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

main .wrapper .aside {
  width: 160px;
  height: 400px;
  text-align: center;
  background: #fff;
  padding: 9px 0;
  border: 1px solid #d3d3d3;
  box-sizing: border-box;
}

main .wrapper .aside .icon-title .icon {
  width: 60px;
  height: 60px;
  margin: 10px auto;
  border-radius: 50%;
  overflow: hidden;
  background: url(../images/pc_icon_user.jpg);
  background-size: 100%;
}

main .wrapper .aside .icon-title > p {
  font-size: 14px;
  color: #23527c;
  font-size: 10px;
  padding-bottom: 10px;
  margin-bottom: 5px;
  border-bottom: 1px solid #c30000;
}

main .wrapper .aside .nav .nav-link {
  padding: 5px 16px;
}

main .wrapper .aside .nav .active {
  color: #db0000;
  background: #fff;
}

main .wrapper .aside .nav > a {
  font-size: 10px;
  color: #626262;
}

main .wrapper .aside .nav > a:hover {
  text-decoration: none;
}

main .wrapper .aside .nav .weight {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 16px;
  color: #000;
}

main .wrapper .article {
  width: 700px;
  background: #fff;
  padding: 20px;
}

main .wrapper .article .more {
  font-size: 10px;
  color: #5c5c5c;
  margin: 0 10px;
}

main .wrapper .article .nav-myorder {
  display: flex;
  justify-content: space-between;
}

main .wrapper .article .nav-myorder .myorder-search ::-webkit-input-placeholder {
  font-size: 12px;
}

main .wrapper .article .nav-myorder .myorder-search > input {
  border: 1px solid #d3d3d3;
  border-right: none;
  margin-right: -5px;
  outline: none;
  padding: 0 5px;
}

main .wrapper .article .nav-myorder .myorder-search > button {
  background: #fff;
  border: 1px solid #d3d3d3;
}

main .wrapper .article .nav-myorder .active {
  margin: 0;
}

main .wrapper .article .goods {
  position: relative;
  width: 100%;
  height: 160px;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #d3d3d3;
}

main .wrapper .article .goods .state-activation {
  font-size: 14px;
  margin-bottom: 5px;
  color: #808080;
}

main .wrapper .article .goods .state-noactive {
  font-size: 14px;
  margin-bottom: 5px;
  color: #d30000;
}

main .wrapper .article .goods .goods-des {
  display: flex;
}

main .wrapper .article .goods .goods-des .des-left {
  flex: 1;
  font-size: 10px;
  color: #808080;
}

main .wrapper .article .goods .goods-des .des-right {
  font-size: 10px;
  color: #808080;
}

main .wrapper .article .goods .goods-des .des-right > span {
  font-size: 12px;
  color: #db0000;
}

main .wrapper .article .goods .goods-hr {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #d3d3d3;
}

main .wrapper .article .goods .goods-info {
  margin-top: 20px;
  display: flex;
}

main .wrapper .article .goods .goods-info .goods-icon {
  width: 60px;
  height: 60px;
}

main .wrapper .article .goods .goods-info .goods-icon > img {
  width: 100%;
  height: 100%;
}

main .wrapper .article .goods .goods-info .goods-name {
  flex-grow: 3;
}

main .wrapper .article .goods .goods-info .goods-name > p {
  margin-left: 10px;
  color: #000;
  margin-bottom: 8px;
}

main .wrapper .article .goods .goods-info .goods-name .name {
  font-size: 12px;
}

main .wrapper .article .goods .goods-info .goods-name .price {
  font-size: 10px;
}

main .wrapper .article .goods .goods-info .goods-btn {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

main .wrapper .article .goods .goods-info .goods-btn > button {
  width: 80px;
  height: 25px;
  color: #000;
  font-size: 12px;
  border: 1px solid #d3d3d3;
}

main .wrapper .article .goods .goods-info .goods-btn .btn-rw {
  background: #d30000;
  color: #fff;
}

main .wrapper .article .page {
  width: 100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

main .wrapper .article .page .number {
  text-align: center;
  width: 40px;
  height: 25px;
  margin: 0 5px;
  background: #757575;
}

main .wrapper .article .page > span {
  font-size: 20px;
}

main .wrapper .article .article-title {
  color: #000;
  margin-bottom: 0;
}

main .wrapper .article .nav-tabs {
  border-bottom: none;
}

main .wrapper .article .nav-tabs .nav-link {
  padding: 8px 10px;
}

main .wrapper .article .nav-tabs a {
  border-bottom: none;
  color: #808080;
  font-size: 12px;
}

main .wrapper .article .nav-tabs a:hover {
  border: 1px solid transparent;
  color: none;
}

main .wrapper .article .nav-tabs .active {
  color: #db0000;
  border: 1px solid transparent;
}

main .wrapper .article .nav-tabs .division {
  width: 1px;
  height: 15px;
  margin-top: 10px;
  background: #979797;
}

main .wrapper .article .card-deck {
  width: 600px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #d3d3d3;
}

main .wrapper .article .card-deck .card {
  padding-bottom: 10px;
  border: none;
  width: 100px;
  text-align: center;
}

main .wrapper .article .card-deck .card > img {
  width: 100%;
}

main .wrapper .article .card-deck .card .card-body {
  margin: 0;
  padding: 0;
}

main .wrapper .article .card-deck .card .card-body > h6 {
  margin-top: 5px;
  font-size: 12px;
  color: #ce0000;
}

main .wrapper .article .card-deck .card .card-body > p {
  margin: 5px 0;
  font-size: 10px;
  color: #808080;
}

main .wrapper .article .card-deck .card .card-body .btn {
  font-size: 12px;
}

main .wrapper .article .card-deck .card .card-body .btn-waitcommented {
  color: #fff;
  border-radius: 0;
  background: #ce0000;
}

main .wrapper .article .card-deck .card .card-body .btn-commented {
  color: #000;
  background: #f4f4f4;
}

main .wrapper .article .title-content {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #d3d3d3;
}

main .wrapper .article .title-content .title-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  background: url(../images/pc_icon_user.jpg);
  background-size: 100%;
  margin: 10px 0;
  border: 3px double #d3d3d3;
  float: left;
}

main .wrapper .article .title-content > span {
  display: inline-block;
  margin: 10px;
}

main .wrapper .article .title-content .text-email {
  font-size: 12px;
  position: absolute;
  top: 10px;
  right: 0;
}

main .wrapper .article .des-content .des-flex {
  display: flex;
  margin-top: 30px;
  justify-content: space-around;
}

main .wrapper .article .des-content .des-flex .des-icon {
  position: relative;
  margin: auto;
}

main .wrapper .article .des-content .des-flex .des-icon > p {
  margin: 3px 0;
  padding: 0;
}

main .wrapper .article .des-content .des-flex .wait {
  font-size: 12px;
  color: #d12222;
}

main .wrapper .article .des-content .des-flex .see {
  font-size: 10px;
  color: #686868;
}

main .wrapper .article .des-content .des-flex img {
  width: 80px;
}

main .wrapper .article .address {
  width: 98%;
  height: 300px;
  margin-top: 10px;
  border-top: 1px solid #d3d3d3;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

main .wrapper .article .address > div {
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  border: 1px solid #d3d3d3;
}

main .wrapper .article .address > div .wrap {
  margin: 0 auto;
}

main .wrapper .article .address > div .wrap > a {
  text-align: center;
  display: block;
}

main .wrapper .article .address > div .wrap > h6 {
  font-size: 14px;
  text-align: left;
}

main .wrapper .article .address > div .wrap > p {
  font-size: 12px;
  padding: 0;
  margin: 0;
}

main .wrapper .article .modal-content {
  width: 300px;
  padding: 20px;
}

main .wrapper .article .modal-content > input {
  outline: none;
  padding: 5px;
  height: 30px;
  margin: 5px 0;
}

main .wrapper .article .modal-content > input::-webkit-input-placeholder {
  font-size: 12px;
  color: #337ac3;
}

main .wrapper .article .modal-content > input::-moz-input-placeholder {
  font-size: 12px;
  color: #337ac3;
}

main .wrapper .article .modal-content .address-select {
  display: flex;
}

main .wrapper .article .modal-content .address-select .form-control {
  width: 40%;
  height: 30px;
  margin: 5px 10px 5px 0;
  padding: 5px;
  font-size: 12px;
  color: #337ac3;
  font-weight: 600;
}

main .wrapper .article .modal-content .address-modalhr {
  width: 100%;
}

main .wrapper .article .modal-content .btns {
  display: flex;
  justify-content: space-around;
}

main .wrapper .article .modal-content .btns .addressbtn {
  width: 100px;
  height: 40px;
  border-radius: 3px;
  border: none;
  font-size: 12px;
}

main .wrapper .article .modal-content .btns .address-modalsave {
  color: #fff;
  background: #da0000;
}

main .wrapper .article .modal-content .btns .address-modalcancel {
  color: #000;
  border: 1px solid #d3d3d3;
}

main .wrapper .article .info {
  display: flex;
  padding: 10px 0;
  border-top: 1px solid #d3d3d3;
}

main .wrapper .article .info .info-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}

main .wrapper .article .info .info-icon > i {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px double #dedede;
}

main .wrapper .article .info .info-icon > i > img {
  width: 100%;
}

main .wrapper .article .info .info-des {
  flex-grow: 2;
}

main .wrapper .article .info .info-des > div {
  display: flex;
  font-size: 14px;
  padding: 5px 0;
  margin-bottom: 5px;
  color: #808080;
  border-bottom: 1px solid #d3d3d3;
  justify-content: space-between;
  align-items: center;
}

main .wrapper .article .info .info-des > div .info-title {
  padding: 0;
  margin: 0;
  color: #000;
  font-size: 14px;
  font-weight: 600;
}

main .wrapper .article .info .info-des > div .reviseinfo {
  padding: 0;
  margin: 0;
  font-size: 10px;
  color: #ce001f;
}

main .wrapper .article .revisepwd {
  width: 100%;
  border-top: 1px solid #d3d3d3;
}

main .wrapper .article .revisepwd > table > tr {
  margin: 5px 0;
}

main .wrapper .article .revisepwd > table > tr td {
  margin: 50px 0;
}

main .wrapper .article .revisepwd .label {
  text-align: right;
  line-height: 30px;
  width: 150px;
  height: 30px;
  font-size: 14px;
  font-weight: 600;
}

main .wrapper .article .revisepwd span {
  margin: 0 5px;
  font-size: 14px;
}

main .wrapper .article .revisepwd input {
  border: 1px solid #d3d3d3;
  height: 30px;
  padding: 5px;
  outline: none;
}

main .wrapper .article .revisepwd ::-webkit-input-placeholder {
  font-size: 12px;
}

main .wrapper .article .revisepwd ::-moz-input-placeholder {
  font-size: 12px;
}

main .wrapper .article .revisepwd .notes {
  color: #808080;
  font-size: 10px;
}

main .wrapper .article .revisepwd [type=checkbox] {
  vertical-align: middle;
}

main .wrapper .article .revisepwd .submit {
  border: none;
  font-size: 12px;
  color: #fff;
  width: 80px;
  height: 30px;
  margin: 10px 0;
  background: #d60000;
}
